<template>
	<view class="">
		<view class="user">
			<view class="core">供应商中心</view>
			<view class="heder_number">
				<view class="left">
					<image src="../../../static/images/header-t.jpg" mode=""></image>
				</view>
				<view class="right">
					<view class="username">xxx旅行社</view>
				</view>
			</view>
		</view>
		<view class="Again_list">
			<view class="bution_list">
				<view class="month">本月总营业额￥</view>
				<view class="money">19098.00</view>
			</view>
			<view class="order_list">
				<view class="month_guanl">订单管理</view>
				<view class="strip">有<span class="numbertwo">22</span>条未处理</view>
			</view>
			<view class="qiun-charts" >
				<!--#ifndef MP-ALIPAY -->
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
				<!--#endif-->
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/js_sdk/u-charts/u-charts/u-charts.js';
	import  { isJSON } from '@/common/checker.js';
	var _self;
	var canvaLineA=null;
	export default{
		data(){
			return{
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				textarea:''
			}
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function (res) {
					if(res.pixelRatio>1){
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio =2;
					}
				}
			});
			//#endif
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.getServerData();
		},
		methods:{
			getServerData(){
				uni.request({
					url: 'https://www.ucharts.cn/data.json',
					data:{
					},
					success: function(res) {
						console.log(res.data.data)
						let LineA={categories:[],series:[]};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						
						LineA.categories=res.data.data.LineA.categories;
						LineA.series=res.data.data.LineA.series;
						//第二根线为虚线的设置
						LineA.series[1].lineType='dash';
						LineA.series[1].dashLength=10;
						_self.textarea = JSON.stringify(res.data.data.LineA);
						_self.showLineA("canvasLineA",LineA);
					},
					fail: () => {
						_self.tips="网络错误，小程序端请检查合法域名";
					},
				});
			},
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
		colors:['#facc14', '#f04864', '#8543e0', '#90ed7d'],
					fontSize:11,
					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
				
				
				
			},
			touchLineA(e) {
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
					
				});
				
			},
			changeData(){
				if(isJSON(_self.textarea)){
					let newdata=JSON.parse(_self.textarea);
					canvaLineA.updateData({
						series: newdata.series,
						categories: newdata.categories
					});
				}else{
					uni.showToast({
						title:'数据格式错误',
						image:'../../../static/images/alert-warning.png'
					})
				}
			},
			datacustom(){
				uni.navigateTo({
					url:'../../distribution/form/calendar'
				})
			},
			fincenten(){
				uni.navigateTo({
					url:'finances/finances'
				})
			},
			choice(){
				uni.navigateTo({
					url:'../recharge/presentation'
				})
			},
			order(){
				uni.navigateTo({
					url:'ordert/ordert'
				})
			},
			form(){
				uni.navigateTo({
					url:'trend/trend'
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../../common/iconfont.css";
	@font-face {
	       font-family: 'iconfont';
		    src: url('~@/static/iconfont.ttf');
	}
	page{
		background: #f2f2f2;
		height: 100%;
	}
	// 折线图
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	.Again_list{
		margin-top: 10upx;
		padding-bottom: 100upx;
	}
	.numberid{
		color: #fff;
		font-size: 30upx;
	}
	.numbertwo{
		color: #fff;
		font-weight: bold;
		margin: 0upx 10upx;
	}
	.order_list{
		width: 100%;
		height: 240upx;
		background: linear-gradient(to right, #02AAB0,#00CDAC); 
		font-size: 44upx;
		margin-bottom: 10upx;
		position: relative;
	}
	.strip{
		position: absolute;
		bottom: 5upx;
		right: 28upx;
		color: #fff;
		font-size: 30upx;
	}
	.month_guanl{
		font-size: 40upx;
		line-height: 240upx;
		color: #fff;
		text-align: center;
	}
	.month{
		font-size: 40upx;
		line-height: 240upx;
		color: #fff;
	}
	.money{
		font-size: 40upx;
		color: #fff;
		font-weight: bold;
		line-height: 240upx;
	}
	.bution_list{
		display: flex;
		justify-content: center;
		width: 100%;
		height: 240upx;
		background: linear-gradient(to right,#2193b0, #6dd5ed); 
		font-size: 44upx;
		margin-bottom: 10upx;
	}
	
	.ative_number{
		display: flex;
		width: 80%;
	}
	
	.user{
		width: 92%;
		padding: 78upx 4% 30upx 4%;
		align-items: center;
		background: linear-gradient(to right, #fbcb65, #f9bb36); 
		.core{
			width: 100%;
			text-align: center;
			height: 88upx;
			line-height: 88upx;
			font-size: 36upx;
			font-weight: bold;
			color: #fff;
		}
		.heder_number{
			text-align: center;
		}
		.left{
			width: 20vw;
			height: 20vw;
			margin: 0 auto;
			margin-top: 30upx;
			flex-shrink: 0;
			border: solid 1upx #fff;
			border-radius: 100%;
			image{
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}
			
		}
		.right{
			width: 100%;
			margin-top:10upx;
			.username{
				font-size: 32upx;
				color: #fff;
				font-weight: 600;
			}
			.signature{
				color: #eee;
				font-size: 28upx;
			}
		}
	}
</style>
